<template>
	<div class="IndexSwiper">
		<h1>文章列表</h1>
		<!--添加按钮-->
		<el-row class="addBtn clear_fix">
			<el-button class="addImg" type="primary" @click="addBtn">添加滚动广告</el-button>
		</el-row>
	<!--广告头部-->
		<el-table :data="tableData">
		    <el-table-column label="标题" width="300">
		      <template slot-scope="scope">
		        <span style="margin-left: 10px">
		        	<div class="indImg">{{scope.row.title}}</div>
		        </span>
		      </template>
		    </el-table-column>
		     <el-table-column label="简介" width="300" >
		      <template slot-scope="scope">
		        <p>{{scope.row.brief}}</p>
		      </template>
		    </el-table-column> 
		    <el-table-column label="浏览量" >
		      <template slot-scope="scope">
		        <p>{{scope.row.views}}</p>
		      </template>
		    </el-table-column>
		     <el-table-column label="推荐" >
		      <template slot-scope="scope">
		        <p>{{scope.row.stars}}</p>
		      </template>
		    </el-table-column>
		    <el-table-column label="操作">
		    	 <template slot-scope="scope">
		    	<el-dropdown @command="operBtn">
				  <el-button type="primary">
				    更多<i class="el-icon-arrow-down el-icon--right"></i>
				  </el-button>
					  <el-dropdown-menu slot="dropdown">
					    <el-dropdown-item :command="{type:'oper',id:scope.row.id}">编辑</el-dropdown-item>
					    <el-dropdown-item :command="{type:'up',ord:scope.row.orders}">上升</el-dropdown-item>
					    <el-dropdown-item :command="{type:'down',ord:scope.row.orders}">下降</el-dropdown-item>
					    <el-dropdown-item :command="{type:'del',id:scope.row.id}">删除</el-dropdown-item>
					  </el-dropdown-menu>
				</el-dropdown>
				</template>
	    	</el-table-column>
	  	</el-table>
	  	<div class="page">
		  	<el-pagination
			  background
			  layout="prev, pager, next"
			  :total="pageNum"
			  :current-page="pageN"
			  @current-change="changeB"
			  >
			</el-pagination>
	  	</div>
	</div>
</template>

<script>
	import axios from "axios"
	import config from '@/assets/js/config.js'
	export default {
		data() {
			return {
			   tableData: [],
               pageNum:0,
               pageN:1,
               
			}	
		},
		methods: {
			getList(){
				this.$require.get(this.$config1.newsList,{
					params:{
						page:this.pageN-1,
					}
				})
		    		.then((res)=>{
		    			console.log(res)
		    			this.tableData=res.data.data.rows
		    			this.pageNum=res.data.data.count
		    			
		    		})
		    		.catch((err)=>{
		    			console.log("请求失败")
		    		})
			},
			changeB(inx){
				this.pageN=inx
				this.getList()
			},
			addBtn(){
				this.$router.push({
					path:"/article/add"
				})
			},
			aaa(i){
				console.log(i)
			}
			,
			operBtn(idx){
				console.log(idx.type)
				if(idx.type=="up"){//上升
					this.$require.post(this.$config.sortNewsList,{
			      		move:1,
			      		orders:idx.ord
			      	})
			      	.then((res)=>{
			      		this.getList()
			      	})
				}else if(idx.type=="down"){//下降
					this.$require.post(this.$config.sortNewsList,{
			      		move:-1,
			      		orders:idx.ord
			      	})
			      	.then((res)=>{
			      		this.getList()
			      	})
				}else if(idx.type=="del"){//删除
					this.$confirm('此操作将永久删除该文件, 是否继续?', '提示',{
									confirmButtonText: '确定',
									cancelButtonText: '取消',
									type: 'warning',
								
								}).then((res) => {
									// this.delid = id
									this.$message({
										type: 'success',
										message: '删除成功!',
									});
									this.$require.post(this.$config.delNewsList,{
										id:idx.id
									})
									.then((res)=>{
										this.getList()
										console.log(res)
									})
									
								})
								.catch(() => {
									this.$message({
										type: 'info',
										message: '已取消删除'
									})
									this.getList()
								});	
					}else{
						this.$router.push({
							name:"article/Edit",
							query:{
								id:idx.id
							}
						})
				}
			}
    	},
    	created(){
    		this.getList()
    	}
	}
</script>

<style lang="scss" scoped>
	.IndexSwiper{
		margin: 20px auto 0px;
		/*width:%;*/
		height: 100%;
		padding: 0 30px;
		h1{
			font-size: 32px;
		}
	}
	.addBtn{
		margin-top: 20px;
	}
	.indImg{
		width:100px;
	}
	.addImg{
		float: left;
	}
	.selectType{
		float: right;
	}
	.el-dialog__title {
	    line-height: 30px;
	    font-size: 25px !important;
	    color: #303133;
	}
	.el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .page{
  	margin-top:40px ;
  	text-align: center;
  }
</style>